<template>
  <div>
    <DatePicker
      type="date"
      :value="value1"
      format="yyyy-MM-dd"
      :options="options3"
      placeholder="选择日期"
      :clearable="false"
      style="width: 200px;float: right;position: relative;z-index: 1000;transform: translateY(-45px)"
      @on-change="dateChange"
    ></DatePicker>
    <div class="echart" id="windPowerChart"></div>
  </div>
</template>
<script>
import echart from "echarts";
import moment from "moment";
import { cdfdpawday } from "@/api/scada";

export default {
  name: "echart",
  props: {},
  data() {
    return {
      value1: moment(new Date()).format("yyyy-MM-DD"),
      options3: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      option: {
        textStyle: {
          fontWeight: 400,
          fontSize: 14,
          color: "#666"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
            left: 20,
            right: 20,
            bottom: 20,
            top: 50,
            containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#E8E8E8",
              width: 1
            }
          }
        },

        yAxis: {
          name: "单位(kW)",
          nameTextStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: "#666",
              align:'left',
              width:20
          },
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#E8E8E8"
            }
          }
        },
        series: [
          {
            name: "发电功率(kW)",
            showSymbol: false,
            data: [],
            type: "line",
            itemStyle: {
              color: "#90D66E"
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(144, 214, 110, 1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(144, 214, 110, 0.06)"
                    }
                  ],
                  global: false
                }
              }
            },
            smooth: false
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    let echartBox = document.querySelector("#windPowerChart");
    this._myCahrt = echart.init(echartBox);
    this.drawChart();
  },
  watch: {},
  methods: {
    dateChange(date) {
      console.log(date);
      this.value1 = date;
      this.drawChart();
    },
    drawChart() {
      let data = {
        powerdate: this.value1
      };
      cdfdpawday(data).then(res => {
        this.option.series[0].data = res.map(item => +item.cdfdpawday);
        this.option.xAxis.data = res.map(item => item.powerhour);
        this._myCahrt.setOption(this.option, true);
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
.echart {
  height: 260px;
}
</style>
